<template>
  <div class="si-dialog">
    <el-dialog
      ref="si-dialog"
      :visible.sync="dialogVisible"
      :before-close="beforeClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      v-bind="attrs"
    >
      <slot>
        <p>弹窗内容自定义</p>
      </slot>
      <div v-if="!attrs['show-footer']" class="dialog-footer">
        <slot name="footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </slot>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'SiDialog',
  props: {
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    attrs: {
      type: Object,
      default: function() {
        return {
          width: '500px',
          title: 'title',
          'custom-class': 'custom-dialog'
        }
      }
    }
  },
  provide() {
    return {
      dialogClose: this.close
    }
  },
  data() {
    return {}
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法
        this.$emit('update:visible', val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {})
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    },
    beforeClose(done) {
      this.close()
      done()
    }
  }
}
</script>
<style lang="scss" scoped>
.si-dialog {
  /deep/ .dialog-footer {
    text-align: right;
  }
}
</style>
